import React from "react";
import axios from "axios";

export default function VideoInput(props) {
    const { width, height } = props;

    const inputRef = React.useRef();

    const [source, setSource] = React.useState();

    const handleFileChange = (event) => {
        const fd = new FormData();
        const file = event.target.files[0];
        console.log(file);
        fd.append('file', file);
        const url = URL.createObjectURL(file);
        setSource(url);
        console.log("@");
        axios({
          //  url:'http://127.0.0.1:3000/upload',
            url: 'https://xdydyw.shasteel.cn/files/upload',
            method:'post',
            data:fd,
        }).then(r =>{
            console.log("yes");
        });
    };

    const handleChoose = (event) => {
        inputRef.current.click();
    };

    return (
        <div className="VideoInput">
            <input
                ref={inputRef}
                className="VideoInput_input"
                type="file"
                onChange={handleFileChange}
                accept=".mov,.mp4"
            />
            {!source && <button onClick={handleChoose}>Choose</button>}
            {source && (
                <video
                    className="VideoInput_video"
                    width="100%"
                    height={height}
                    controls
                    src={source}
                />
            )}
            <div className="VideoInput_footer">{source || "Nothing selectd"}</div>
        </div>
    );
}
